<template>
	<view class="house">
		<block v-if="show">
			<view class="house-navbar">
				<u-tabs
					style="width: 50%;"
					:list="tabs"
					bg-color="rgba(255,255,255,0)" 
					:is-scroll="false"
					active-color="#141414"
					inactive-color="#666"
					:current="tabsIndex"
					@change="changeTabs"
					v-if="showTabs">
				</u-tabs>
			</view>
			<movable-area class="go-home">
				<movable-view direction="all" class="go-square">
					<image :lazy-load="true" src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/static/images/other/2021-05-08/20210508/27902ed18e4eced3bdc87f598e58bbc2.png" @click="goSquare"></image>
				</movable-view>
				<movable-view direction="all" class="go-home-img">
					<image :lazy-load="true" src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/static/images/other/2021-09-28/20210928/05cbf2ae8a67ea113d6814eb34128ad9.png" @click="goHome"></image>
				</movable-view>
			</movable-area>
			<block v-if="tabsIndex==undefined || tabsIndex==0">
				<view class="house-swiper">
					<swiper class="swiper" :indicator-dots="true" :autoplay="false" :interval="5000" @change="swiperChange" :style="{height: swiperHeight + 'px'}" indicator-color="rgba(230,230,230,1)" indicator-active-color="#141414">
						<swiper-item style="padding: 30rpx; background-color: #FFF; box-sizing: border-box;">
							<image :lazy-load="true"
								:src="packageInfo.image_middle"
								@load="imgLoad"
								mode="widthFix"
								:class="'slide-image slide-image-0'"
								@click="preview('banner',packageInfo.image_middle)">
							</image>
							<!-- #ifdef APP-PLUS || H5 -->
							<image :lazy-load="true"
								class="icon" 
								src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/vr/vr-icon.png?v=3"
								@click="goVrLink"
								v-if="packageInfo.vr_url && !isReview">
							</image>
							<!-- #endif -->
						</swiper-item>
						<swiper-item v-for="(data,index) in packageInfo.vice_big" :key="index">
							<image :lazy-load="true" :src="data.image" mode="widthFix" :class="'slide-image slide-image-' + (index+1)" @click="preview('banner',data.image)"></image>
						</swiper-item>
					</swiper>
				</view>
				<view class="house-pro-info">
					<view class="house-pro-info-price">
						<block v-if="isLogin">￥<text>{{packageInfo.retail_price}}</text></block>
						<pt-noLogin v-else margin="0"></pt-noLogin>
					</view>
					<view class="house-pro-info-tit">
						<view class="house-pro-info-tit-left">
							<view class="title">{{packageInfo.group_name}}</view>
							<view class="brief">
								<view>
									<text>{{packageInfo.remark}}</text>
									<text v-for="(data,index) in packageInfo.major_group_goods_list" :key="index">{{data.group_space_name}}</text>
								</view>
								<view class="btn">
									<view class="house-pro-info-tit-right" style="margin-right: 30rpx;" @click="poster">
										<image :lazy-load="true" src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/proInfo/icon3.png"></image>
									</view>
									<view class="house-pro-info-tit-right">
										<view @click="UpCollect">
											<image :lazy-load="true" src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/proInfo/icon1.png" v-if="!isCollect"></image>
											<image :lazy-load="true" src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/proInfo/icon1_hover.png" v-else></image>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<!-- #ifdef MP-WEIXIN || APP-PLUS || H5 -->
					<view class="product-download-copy" @click="goDownCopy">
						<image src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/proInfo/icon9.png"></image>
						<text class="name">一键分享九宫格</text>
						<u-icon name="arrow-right" color="#8f8f8f"></u-icon>
					</view>
					<!-- #endif -->
					<view class="house-pro-info-four">
						<view class="house-pro-info-four-item"><view class="icon"><u-icon name="checkbox-mark" size="20"></u-icon></view><text class="name">免费设计</text></view>
						<view class="house-pro-info-four-item"><view class="icon"><u-icon name="checkbox-mark" size="20"></u-icon></view><text class="name">优质家具</text></view>
						<view class="house-pro-info-four-item"><view class="icon"><u-icon name="checkbox-mark" size="20"></u-icon></view><text class="name">物流三包</text></view>
						<view class="house-pro-info-four-item"><view class="icon"><u-icon name="checkbox-mark" size="20"></u-icon></view><text class="name">精选款式</text></view>
					</view>
				</view>
				<view class="house-space">
					<view class="house-space-item" v-for="(data,index) in packageInfo.major_group_goods_list" :key="index">
						<view class="house-space-item-name">
							<view class="house-space-item-name-left">
								<text class="name">{{data.group_space_name}}</text>
								<text class="price" v-if="isLogin">￥{{data.group_space_price}}</text>
							</view>
							<view class="house-space-item-name-right">
								<u-checkbox @change="selectSpace" v-model="data.checked" size="36" active-color="#141414"></u-checkbox>
							</view>
						</view>
						<view class="house-space-item-image">
							<image :lazy-load="true" :src="data.group_space_image" mode="widthFix"></image>
						</view>
						<view class="house-space-item-goods">
							<scroll-view scroll-x class="house-space-item-goods-scroll">
								<view class="house-space-item-goods-list">
									<view class="house-space-item-goods-item" v-for="(goodsItem,i) in data.goods_list" :key="i" @click="goProInfo(goodsItem.goods_id)">
										<image :lazy-load="true" :src="goodsItem.sku_lists[0].img" mode="aspectFill"></image>
										<view class="goods-name">{{goodsItem.goods_name}}</view>
										<view class="price" v-if="isLogin">￥{{goodsItem.retail_price * goodsItem.num}}<block v-if="goodsItem.num!=1">({{goodsItem.num}}件)</block></view>
									</view>
								</view>
							</scroll-view>
						</view>
					</view>
				</view>
				<pt-loading-more v-if="isLoading"></pt-loading-more>
				<view class="package-detail" v-if="showDetail">
					<view class="package-detail-tit">套餐详情</view>
					<image :lazy-load="true" v-for="(data,index) in packageInfo.img_info" :key="index" :src="data.image" mode="widthFix" @click="preview('img_info',data.image)"></image>
				</view>
			</block>
			<block v-if="tabsIndex==1">
				<view class="package-detail">
					<view class="package-detail-tit">套餐详情</view>
					<image :lazy-load="true" v-for="(data,index) in packageInfo.img_info" :key="index" :src="data.image" mode="widthFix" @click="preview('img_info',data.image)"></image>
				</view>
			</block>
			<!-- <block v-if="tabsIndex==2">  推荐模块
				<view class="package-recomment">
					<block v-if="recommentList.length">
						<pt-product-items :showSort="false" :object="{goods_list: recommentList}" :noMore="true"></pt-product-items>
					</block>
					<pt-nothing 
						text="暂无推荐" 
						bgColor="#F5F5F5" 
						:fixed="true"
						:top="top * 2"
						:bottom="120"
						icon="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/nothing.png?v=1" 
						v-if="noMore && !recommentList.length">
					</pt-nothing>
				</view>
			</block> -->
			<view class="house-bottom">
				<view class="house-bottom-left">
					<view class="choseNum">已选 {{num}}/{{packageInfo.major_group_goods_list.length}}个空间</view>
					<view class="price">
						<block v-if="isLogin">合计：<text>￥<text>{{Amount}}</text></text></block>
						<pt-noLogin v-else margin="0"></pt-noLogin>
					</view>
				</view>
				<view class="house-bottom-right">
					<view :class="['add-car',{isAdd: isAdd}]" @click="addCar">
						<u-loading mode="flower" v-if="isAdd" style="margin-right: 10rpx;"></u-loading>
						{{isAdd?'正在添加':'加入购物车'}}
					</view>
					<view class="buy" @click="buy">立即购买</view>
				</view>
			</view>
			
			<!-- 海报 -->
			<uni-popup :type="popupType" ref="poster" @change="posterFun" class="posterPopup">
				<view class="poster" v-if="showCanvas">
					<!-- #ifdef H5 -->
					<!-- <canvas id="poster" class="poster-canvas" canvas-id="poster" style="width: 600rpx; height: 900rpx;"></canvas> -->
					<canvas id="poster" class="poster-canvas" canvas-id="poster" style="width: 600rpx; height: 900rpx;"></canvas>
					<image :src="H5PosterUrl" style="width: 600rpx; height: 900rpx;" v-if="H5PosterUrl"></image>
					<view class="save">请长按图片保存</view>
					<!-- #endif -->
					<!-- #ifdef MP-WEIXIN -->
					<canvas id="poster" class="poster-canvas" canvas-id="poster" style="width: 600rpx; height: 816rpx;"></canvas>
					<view class="save" @click="savePoster">保存到相册</view>
					<!-- #endif -->
					<!-- #ifdef APP-PLUS -->
					<view class="appPoster">
						<view class="close" @click="closePoster" :style="{top: top + 'px'}"><u-icon name="close" size="40" color="#FFF"></u-icon></view>
						<canvas id="poster" class="poster-canvas" canvas-id="poster" style="width: 600rpx; height: 816rpx;"></canvas>
					</view>
					<view class="poster-share-btns">
						<view class="poster-share-btn" @click="sharePostToFriend(1)">
							<u-icon name="weixin-circle-fill" size="80" color="#31cc76"></u-icon>
							<view class="text">微信好友</view>
						</view>
						<view class="poster-share-btn" @click="sharePostToFriend(2)">
							<u-icon name="moments-circel-fill" size="80" color="#f59359"></u-icon>
							<view class="text">朋友圈</view>
						</view>
						<view class="poster-share-btn" @click="savePoster">
							<view class="poster-share-btn-image">
								<image :lazy-load="true" src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/proInfo/save.png" mode="aspectFit"></image>
							</view>
							<view class="text">保存图片</view>
						</view>
					</view>
					<!-- #endif -->
				</view>
			</uni-popup>
			<!-- 海报 -->
		</block>
		
		<pt-openSetting ref="openSetting" tips="您已关闭相册访问开关，请打开开关后重新保存"></pt-openSetting>
		
		<uni-popup type="bottom" ref="squarePop">
			<pt-square-pop @close="$refs.squarePop.close()" :goodsId="packageInfo.group_id" :goodsType="3" ref="pt-square-pop"></pt-square-pop>
		</uni-popup>
		
		<pt-loading></pt-loading>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isReview: false,
				show: false,
				num: 0,
				showTabs: false,
				tabsIndex: 0,
				tabs: [{
					name: '商品'
				},{
					name: '详情'
				}],
				// ,{
				// 	name: '推荐'
				// }
				top: 0,
				background: {
					backgroundColor: 'rgba(255,255,255,0)',
				},
				swiperHeight: 400,
				group_id: '',
				packageInfo: {
					major_group_goods_list: []
				},
				recommentList: [],
				noMore: true,
				isLoading: false,
				showDetail: false,
				Amount: 0,
				isCollect: false,
				isAdd: false,
				// canvas
				QRcode: '',
				// 足迹参数
				addFootParam: {
					start_time: '',
					end_time: '',
					stay_time: 0
				},
				showCanvas: false,
				popupType: 'center',
				H5store_id: '',
				activity: '',
				H5PosterUrl: '',
				isLogin: false
			};
		},
		onPageScroll(e) {
			if(this.tabsIndex==0){
				if(e.scrollTop >= 200){
					this.showTabs = true
					this.$nextTick(() => {
						uni.createSelectorQuery().in(this).select('.house-navbar').boundingClientRect(navbarRes => {
							this.top = navbarRes.height
						}).exec()
					})
				}else{
					this.showTabs = false
				}
			}
		},
		onReachBottom() {
			if(this.tabsIndex==0){
				this.isLoading = true
				setTimeout(() => {
					this.isLoading = false
					this.showDetail = true
				},2000)
			}
		},
		onLoad(options) {
			if(options.store_id && options.active){
				this.H5store_id = options.store_id
				this.activity = options.active
				uni.setStorageSync('temporary',true)
			}
			// #ifdef H5 || MP-WEIXIN
			this.popupType = 'center'
			// #endif
			// #ifdef APP-PLUS
			this.popupType = 'bottom'
			// #endif
			let scene
			if(options.scene){
				scene = decodeURIComponent(options.scene)
				this.parent_id = this.filterUrlParam(scene).parent_id
				uni.setStorageSync('parent_id',this.filterUrlParam(scene).parent_id)
				uni.setStorageSync('newurl','/pages/package/house-info?group_id='+this.filterUrlParam(scene).group_id+'&parent_id='+this.filterUrlParam(scene).parent_id)
				this.$u.api.binding_refer({id: this.filterUrlParam(scene).parent_id}).catch(() => {
					console.log('接口报错：绑定失败')
					// uni.showToast({
					// 	icon: 'none',
					// 	title: '绑定失败'
					// })
				})
				this.group_id = this.filterUrlParam(scene).group_id
			}else{
				this.group_id = options.group_id
			}
			this.isReview = uni.getStorageSync('review')?uni.getStorageSync('review'):false
			this.init()
			if(options.parent_id){
				uni.setStorageSync('parent_id',options.parent_id)
				// 如果用户从分享的小程序卡片点击进来的,设置一个url缓存,登录后返回当前缓存url
				let pages = getCurrentPages();
				let curPage = pages[pages.length - 1];
				uni.setStorageSync('newurl',curPage.$page.fullPath)
				this.$u.api.binding_refer({id: options.parent_id}).catch(() => {
					console.log('接口报错：绑定失败')
					// uni.showToast({
					// 	icon: 'none',
					// 	title: '绑定失败'
					// })
				})
			}
			this.$u.api.GoodsClick({
				goods_id: this.group_id,
				goods_type: 3
			})
		},
		onShow() {
			if(this.$refs.squarePop){
				this.$refs['pt-square-pop'].init()
			}
			if(uni.getStorageSync('userInfo')){
				this.isLogin = true
			}else{
				this.isLogin = false
			}
		},
		methods: {
			// 解析小程序scene参数
			filterUrlParam(urlSearch){
			  let ret = {}
			  let regParam = /([^&=]+)=([\w\W]*?)(&|$|#)/g
			  if (urlSearch) {
			    var strParam = urlSearch;
			    var result
			    while ((result = regParam.exec(strParam)) != null) {
			      ret[result[1]] = result[2]
			    }
			  }
			  return ret
			},
			init(){
				let data = {}
				if(uni.getStorageSync('temporary')){
					data.group_id = this.group_id
					data.store_id = this.H5store_id
					data.activity = this.activity
				}else{
					data.group_id = this.group_id
				}
				this.$u.api.GroupInfo(data).then(res => {
					this.show = true
					this.packageInfo = res.datas
					uni.setNavigationBarTitle({
						title: res.datas.group_name
					})
					if(this.packageInfo.is_sale==2){
						uni.showToast({
							icon: 'none',
							title: '此套餐已下架,无法购买'
						})
					}
					let user_id = uni.getStorageSync('userInfo')?JSON.parse(uni.getStorageSync('userInfo')).user_id:0
					let store_name = uni.getStorageSync('userInfo')?JSON.parse(uni.getStorageSync('userInfo')).store_name:'深哥家居'
					this.$u.mpShare = {
						title: '【'+ store_name +'】'+ this.packageInfo.group_name,
						path: '/pages/package/house-info?group_id=' + this.group_id +'&parent_id=' + user_id,
						imageUrl: this.packageInfo.image
					}
					if(this.packageInfo.collect_id){
						this.isCollect = true
					}
					if(this.packageInfo.major_group_goods_list.length){
						this.num = 0
						this.packageInfo.major_group_goods_list.forEach(item => {
							this.$set(item,'checked',true)
							this.num++
							if(item.group_class.length){
								let goods = []
								item.group_class.forEach(classItem => {
									if(classItem.goods_list.length){
										classItem.goods_list.forEach(goodsItem => {
											goods.push(goodsItem)
											this.$set(item,'goods_list',goods)
										})
									}
								})
							}
						})
					}
					this.Calculation()
				})
			},
			Calculation(){
				this.Amount = 0
				this.packageInfo.major_group_goods_list.forEach(item => {
					if(item.checked){
						this.Amount+=item.group_space_price
					}
				})
			},
			changeTabs(e){
				this.tabsIndex = e
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 0
				})
				if(e>0){
					this.background.backgroundColor = 'rgba(255,255,255,1)'
					this.showTabs = true
				}else{
					this.background.backgroundColor = 'rgba(255,255,255,0)'
					this.showTabs = false
				}
			},
			imgLoad(e){
				this.swiperHeight = Math.floor(750*uni.getSystemInfoSync().windowWidth/750*e.detail.height/e.detail.width)
			},
			swiperChange(e){
				let query = uni.createSelectorQuery().in(this),
						class_name = '.slide-image-' + e.detail.current
				query.select(class_name).boundingClientRect(res => {
					if(res){
						this.swiperHeight = res.height
					}
				}).exec();
			},
			// 图片预览
			preview(type,current){
				let urls = []
				switch (type){
					case 'banner':
						let arr = []
						this.packageInfo.vice_big.forEach(item => {
							arr.push(item.image)
						})
						urls = arr
						urls.unshift(this.packageInfo.image)
						break;
					case 'img_info':
						arr = []
						this.packageInfo.img_info.forEach(item => {
							arr.push(item.image)
						})
						urls = arr
						break;
				}
				uni.previewImage({
					current: current,
					urls: urls
				})
			},
			selectSpace(){
				this.num = 0
				this.packageInfo.major_group_goods_list.forEach(item => {
					if(item.checked){
						this.num++
					}
				})
				this.Calculation()
			},
			goProInfo(goods_id){
				getApp().goProInfo(goods_id)
			},
			// 收藏
			UpCollect(){
				this.$u.api.UpCollect({ status: 2, goods_id: this.group_id}).then(res => {
					this.isCollect = !this.isCollect
					uni.showToast({
						icon: 'none',
						title: res.datas
					})
				})
			},
			addCar(){
				if(this.packageInfo.is_sale==2){
					uni.showToast({
						icon: 'none',
						title: '此套餐已下架,无法购买'
					})
					return false
				}else if(!this.num){
					uni.showToast({
						icon: 'none',
						title: '您未选择空间,请至少选择一个空间'
					})
					return false
				}
				this.isAdd = true
				let space_ids = []
				this.packageInfo.major_group_goods_list.forEach(item => {
					if(item.checked){
						space_ids.push(item.group_space_id)
					}
				})
				let data = {
					type: 3,
					sku_id: 0,
					num: 1,
					goods_id: this.group_id,
					store_id: this.packageInfo.store_id,
					// #ifdef MP-WEIXIN
					client: 1,
					// #endif
					// #ifdef APP-PLUS
					client: 2,
					// #endif
					// #ifdef H5
					client: 3,
					// #endif
					space_ids: space_ids.join(','),
					is_show: 1,
					is_all: 1
				}
				if(space_ids.length==this.packageInfo.major_group_goods_list.length){
					data.is_all = 1
				}else{
					data.is_all = 0
				}
				this.$u.api.AddStoreGoodsCart(data).then(res => {
					this.isAdd = false
					uni.showToast({
						icon: 'none',
						title: '加入购物车成功',
						// success: () => {
						// 	setTimeout(() => {
						// 		uni.navigateTo({
						// 			animationDuration: 500,
						// 			url: '/pages/car/car'
						// 		})
						// 	},1500)
						// }
					})
					if(uni.getStorageSync('userInfo')){
						this.addFoot('加入购物车')
					}
				}).catch(() => {
					this.isAdd = false
				})
			},
			buy(){
				if(this.packageInfo.is_sale==2){
					uni.showToast({
						icon: 'none',
						title: '此套餐已下架,无法购买'
					})
					return false
				}else if(!this.num){
					uni.showToast({
						icon: 'none',
						title: '您未选择空间,请至少选择一个空间'
					})
					return false
				}
				let space_ids = []
				this.packageInfo.major_group_goods_list.forEach(item => {
					if(item.checked){
						space_ids.push(item.group_space_id)
					}
				})
				let data = {
					type: 3,
					sku_id: 0,
					num: 1,
					goods_id: this.group_id,
					store_id: this.packageInfo.store_id,
					// #ifdef MP-WEIXIN
					client: 1,
					// #endif
					// #ifdef APP-PLUS
					client: 2,
					// #endif
					// #ifdef H5
					client: 3,
					// #endif
					space_ids: space_ids.join(','),
					is_show: 2,
					is_all: 1
				}
				if(space_ids.length==this.packageInfo.major_group_goods_list.length){
					data.is_all = 1
				}else{
					data.is_all = 0
				}
				this.$u.api.AddStoreGoodsCart(data).then(res => {
					uni.navigateTo({
						animationDuration: 500,
						url: '/pages/car/confirmOrder/confirmOrder?ids='+res.datas
					})
				})
			},
			// canvas
			poster(){
				this.$nextTick(() => {
					if(uni.getStorageSync('userInfo')){
						this.$refs.poster.open()
						this.$u.api.app_create_group_qr({group_id: this.group_id}).then(res => {
							this.QRcode = res.datas
						}).then(() => {
							this.$nextTick(() => {
								this.OnCanvas()
								// #ifdef H5
								uni.showLoading({
									title: '请稍后···'
								})
								setTimeout(() => {
									this.$nextTick(() => {
										uni.canvasToTempFilePath({
										  canvasId: 'poster',
											success: (data) => {
												this.$u.api.UploadImgByBase({file: data.tempFilePath}).then(res => {
													uni.hideLoading()
													this.H5PosterUrl = res.datas
												})
											},
											fail: (fail) => {
												console.log(fail)
												uni.showToast({
													icon: 'none',
													title: '海报生成失败，请重试'
												})
											}
										})
									})
								},1000)
								// #endif
							})
						}).catch(() => {
							uni.showToast({
								icon: 'none',
								title: '生成失败，请重试!'
							})
							this.$refs.poster.close()
						})
					}else{
						uni.showToast({
							icon: 'none',
							title: '请先登录'
						})
						setTimeout(() => {
							// #ifdef APP-PLUS
							uni.navigateTo({
								animationDuration: 500,
								url: '/pages/login/app-login'
							})
							// #endif
							// #ifdef MP-WEIXIN
							uni.navigateTo({
								animationDuration: 500,
								url: '/pages/login/login'
							})
							// #endif
						},1500)
					}
				})
			},
			async OnCanvas() {
				let _this = this;
				_this.ctx = uni.createCanvasContext('poster',this);
				const systemInfo = uni.getSystemInfoSync()
				const proImgInfo = await _this.getImageInfo({ imgSrc: _this.packageInfo.vice_big[0].image }); // 商品图
				// const avatarImgInfo = await _this.getImageInfo({ imgSrc: JSON.parse(uni.getStorageSync('userInfo')).heard_img }); // 头像
				const QRcodeImgInfo = await _this.getImageInfo({ imgSrc: _this.QRcode }); // 二维码
				let vice_middle1 = '',
						vice_middle2 = ''
				if(_this.packageInfo.vice_middle.length >= 2){
					vice_middle1 = await _this.getImageInfo({ imgSrc: _this.packageInfo.vice_middle[0].image }); // 附图一
					vice_middle2 = await _this.getImageInfo({ imgSrc: _this.packageInfo.vice_middle[1].image }); // 附图二
				}
				_this.canvasW = uni.upx2px(600);
				_this.canvasH = uni.upx2px(816);
				
				_this.ctx.setFillStyle('#FFFFFF');
				_this.ctx.fillRect(0,0,_this.canvasW,_this.canvasH)
				
				// 绘制产品图
				_this.ctx.drawImage(proImgInfo.path, 0, 0, uni.upx2px(600), uni.upx2px(480));
				
				//绘制用户名称跟背景
				// const name = JSON.parse(uni.getStorageSync('userInfo')).nickname
				// if(name.length < 5){
				// 	_this.roundRectColor(_this.ctx, uni.upx2px(35), uni.upx2px(415), (name.length * uni.upx2px(20)) + uni.upx2px(40), uni.upx2px(40),  uni.upx2px(40));
				// }else{
				// 	_this.roundRectColor(_this.ctx, uni.upx2px(25), uni.upx2px(415), (name.length * uni.upx2px(20)) + uni.upx2px(30), uni.upx2px(40),  uni.upx2px(40));
				// }
				// _this.ctx.setFontSize(uni.upx2px(20));
				// _this.ctx.setFillStyle('#FFF');
				// _this.ctx.fillText(name, uni.upx2px(75) , uni.upx2px(440));
				
				// 绘制头像
				// _this.ctx.save()
				// _this.ctx.beginPath()
				// _this.ctx.arc(uni.upx2px(40), uni.upx2px(435), uni.upx2px(21), 0, Math.PI * 2, false);
				// _this.ctx.clip()
				// _this.ctx.stroke();
				// _this.ctx.drawImage(avatarImgInfo.path, uni.upx2px(20), uni.upx2px(414), uni.upx2px(43), uni.upx2px(43))
				// _this.ctx.restore()
				
				// 商品标题
				const goods_name = _this.packageInfo.group_name
				_this.ctx.setFillStyle('#141414');
				_this.ctx.font = 'normal bold 12px Microsoft YaHei';
				if(goods_name.length > 20){
					_this.ctx.fillText(goods_name.substring(0,20) + '...', uni.upx2px(30) , uni.upx2px(530));
				}else{
					_this.ctx.fillText(goods_name, uni.upx2px(30) , uni.upx2px(530));
				}
				
				// 商品副标题
				const biref = _this.packageInfo.brief.replace(/[\r\n]/g, "");
				_this.ctx.setFillStyle('#6B6B6B');
				_this.ctx.font = 'normal nomal 10px Microsoft YaHei';
				if(biref.length > 20){
					_this.ctx.fillText(biref.substring(0,18) + '...', uni.upx2px(30) , uni.upx2px(580));
				}else{
					_this.ctx.fillText(biref, uni.upx2px(30) , uni.upx2px(580));
				}
				
				// 商品价格符号
				const symbol = '￥'
				_this.ctx.setFillStyle('#F59359');
				_this.ctx.font = 'normal nomal 12px Microsoft YaHei';
				_this.ctx.fillText(symbol, uni.upx2px(30) , uni.upx2px(630));
				
				// 商品价格
				const price = _this.packageInfo.retail_price
				_this.ctx.setFillStyle('#F59359');
				_this.ctx.font = 'normal nomal 16px Arial';
				_this.ctx.fillText(price, uni.upx2px(50) , uni.upx2px(630));
				
				// 如果附图有两张或两张以上就绘制附图否则绘制两张主图填充空白区域
				if(_this.packageInfo.vice_middle.length >= 2){
					// 绘制副图一
					_this.ctx.drawImage(vice_middle1.path, uni.upx2px(30), uni.upx2px(670), uni.upx2px(120), uni.upx2px(120));
					// 绘制副图二
					_this.ctx.drawImage(vice_middle2.path, uni.upx2px(170), uni.upx2px(670), uni.upx2px(120), uni.upx2px(120));
				}else{
					// 绘制主图
					_this.ctx.drawImage(proImgInfo.path, uni.upx2px(30), uni.upx2px(670), uni.upx2px(120), uni.upx2px(120));
					_this.ctx.drawImage(proImgInfo.path, uni.upx2px(170), uni.upx2px(670), uni.upx2px(120), uni.upx2px(120));
				}
				
				// 绘制二维码
				_this.ctx.drawImage(QRcodeImgInfo.path, uni.upx2px(400), uni.upx2px(580), uni.upx2px(170), uni.upx2px(170));
				
				// 绘制二维码提示
				const tips = '保存海报即可分享'
				_this.ctx.setFillStyle('#6B6B6B');
				_this.ctx.font = 'normal nomal 10px Microsoft YaHei';
				_this.ctx.fillText(tips, uni.upx2px(410) , uni.upx2px(780));
				
				//延迟后渲染至canvas上
				setTimeout(function() {
					_this.ctx.draw();
				}, 600);
			},
			
			async roundRectColor(context, x, y, w, h, r) {  //绘制圆角矩形（纯色填充）
			  context.save();
			  context.setFillStyle("#000");
			  context.setStrokeStyle('#000')
			  context.setLineJoin('round');  //交点设置成圆角
			  context.setLineWidth(r);
			  context.strokeRect(x + r/2, y + r/2, w - r , h - r );
			  context.fillRect(x + r, y + r, w - r * 2, h - r * 2);
			  context.stroke();
			  context.closePath();
			},
			
			async getImageInfo({ imgSrc }) {
				uni.showLoading({
					title: '正在生成海报',
					mask: true
				})
				return new Promise((resolve, errs) => {
					if(imgSrc.indexOf('https')!=-1){
						uni.downloadFile({
							url: imgSrc,
							success:function(res){
								uni.getImageInfo({
									src: res.tempFilePath,
									success: function(image) {
										uni.hideLoading()
										resolve(image);
									},
									fail(err) {
										uni.hideLoading()
										uni.showToast({
											title: '生成失败，请退出重试',
											icon: 'none',
											duration: 1500
										})
										errs(err);
									}
								});
							}
						})
					}else{
						uni.getImageInfo({
							src: imgSrc,
							success: function(image) {
								uni.hideLoading()
								resolve(image);
							},
							fail(err) {
								uni.hideLoading()
								uni.showToast({
									title: '生成失败，请退出重试',
									icon: 'none',
									duration: 1500
								})
								errs(err);
							}
						});
					}
				});
			},
			savePoster(){
				let _this = this
				uni.showLoading({
					title: '正在保存',
					mask: true
				})
				uni.canvasToTempFilePath({
				  canvasId: 'poster',
				  success: (data) => {
				  	uni.hideLoading()
						// #ifdef APP-PLUS || H5
						uni.saveImageToPhotosAlbum({
							filePath: data.tempFilePath,
							success: (saveRes) => {
								uni.showToast({
									icon: 'none',
									title: '保存成功，请在相册中查看',
									duration: 1500
								})
							},
							fail: () => {
								uni.showToast({
									icon: 'none',
									title: '保存失败，您已取消保存图片'
								})
							}
						})
						// #endif
				  	// #ifdef MP-WEIXIN
						uni.getSetting({
							withSubscriptions: true,
							success: (scope) => {
								if(!scope.authSetting['scope.writePhotosAlbum']){
									uni.authorize({
										scope: 'scope.writePhotosAlbum',
										success: () => {
											uni.saveImageToPhotosAlbum({
												filePath: data.tempFilePath,
												success: (saveRes) => {
													uni.showToast({
														icon: 'none',
														title: '保存成功，请在相册中查看',
														duration: 1500
													})
												},
												fail: () => {
													uni.showToast({
														icon: 'none',
														title: '保存失败，您已取消保存图片'
													})
												}
											})
										},
										fail: () => {
											// uni.showToast({
											// 	icon: 'none',
											// 	title: '您已关闭相册访问开关，请开启后重新保存'
											// })
											this.$refs.openSetting.init()
										}
									})
								}else{
									uni.saveImageToPhotosAlbum({
										filePath: data.tempFilePath,
										success: (saveRes) => {
											uni.showToast({
												icon: 'none',
												title: '保存成功，请在相册中查看',
												duration: 1500
											})
										},
										fail: () => {
											uni.showToast({
												icon: 'none',
												title: '保存失败，您已取消保存图片'
											})
										}
									})
								}
							}
						})
						// #endif
				  }
				})
			},
			addFoot(where){
				this.$u.api.AddFoot({
					// #ifdef MP-WEIXIN
					type: 1,
					// #endif
					// #ifdef APP-PLUS
					type: 2,
					// #endif
					// #ifdef H5
					type: 3,
					// #endif
					store_id: uni.getStorageSync('userInfo')?JSON.parse(uni.getStorageSync('userInfo')).store_id:'',
					client: 1,
					where: where,
					stay_time: this.addFootParam.stay_time,
					goods_id: this.group_id,
					store_goods_id: 0,
					is_new: 1
				})
			},
			goVrLink(){
				uni.navigateTo({
					animationDuration: 500,
					url: '/pages/webview/webview?url='+encodeURIComponent(this.packageInfo.vr_url)
				})
			},
			back(){
				let pages = getCurrentPages()
				if(pages.length>1){
					uni.navigateBack()
				}else{
					// #ifdef MP-WEIXIN
					if(uni.getExtConfigSync().appid==='wx9f2da8a90bb750f7'){
						uni.switchTab({
							url: '/pages/merchant/merchant'
						})
					}else{
						uni.switchTab({
							url: '/pages/index/index'
						})
					}
					// #endif
					// #ifdef APP-PLUS || H5
					uni.switchTab({
						url: '/pages/index/index'
					})
					// #endif
				}
			},
			posterFun(e){
				this.showCanvas = e.show
			},
			sharePostToFriend(type){
				uni.showLoading({
					mask: true,
					title: '正在生成分享··'
				})
				uni.canvasToTempFilePath({
				  destWidth: 600,
				  destHeight: 816,
				  canvasId: 'poster',
				  success: (data) => {
						switch (Number(type)){
							case 1:
								uni.share({
									provider: "weixin",
									scene: "WXSceneSession",
									type: 2,
									imageUrl: data.tempFilePath,
									success: () => {
										console.log('分享成功')
									}
								})
								break;
							case 2:
								uni.share({
									provider: "weixin",
									scene: "WXSenceTimeline",
									type: 2,
									imageUrl: data.tempFilePath,
									success: () => {
										console.log('分享成功')
									}
								})
								break;
						}
				  },
					complete: () => {
						uni.hideLoading()
					}
				})
			},
			// APP端关闭海报弹窗
			closePoster(){
				this.$refs.poster.close()
			},
			goHome(){
				// #ifdef MP-WEIXIN
				if(uni.getExtConfigSync().appid==='wx9f2da8a90bb750f7'){
					uni.switchTab({
						url: '/pages/merchant/merchant'
					})
				}else{
					uni.switchTab({
						url: '/pages/index/index'
					})
				}
				// #endif
				// #ifdef APP-PLUS || H5
				uni.switchTab({
					url: '/pages/index/index'
				})
				// #endif
			},
			goDownCopy(){
				if(!this.isLogin){
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return
				}
				let arr = []
				this.packageInfo.img_info.forEach(item => {
					arr.push(item.image)
				})
				let goods_id = this.group_id,
						goods_name = this.packageInfo.group_name,
						goods_price = this.packageInfo.retail_price,
						goods_img = JSON.stringify(arr),
						brief = this.packageInfo.brief,
						store_id = uni.getStorageSync('userInfo')?JSON.parse(uni.getStorageSync('userInfo')).store_id:1
				uni.navigateTo({
					animationDuration: 500,
					url: '/pages/product-info/down-copy/down-copy?activity=785&goods_id='+goods_id+'&goods_name='+ goods_name + '&goods_price=' + goods_price + '&goods_img='+ goods_img + '&store_id=' + store_id + '&brief=' + brief + '&housepackage=true',
					success: () => {
						this.addFoot('九宫格分享')
					}
				})
			},
			goSquare(){
				this.$refs.squarePop.open()
			}
		},
		mounted() {
			this.addFootParam.start_time = parseInt(new Date().getTime() / 1000)
		},
		onUnload() {
			this.addFootParam.end_time = parseInt(new Date().getTime() / 1000)
			this.addFootParam.stay_time = this.addFootParam.end_time - this.addFootParam.start_time
			if(uni.getStorageSync('userInfo')){
				this.addFoot('查看全屋套餐')
			}
		},
		onHide() {
			this.addFootParam.end_time = parseInt(new Date().getTime() / 1000)
			this.addFootParam.stay_time = this.addFootParam.end_time - this.addFootParam.start_time
			if(uni.getStorageSync('userInfo')){
				this.addFoot('查看全屋套餐')
			}
		},
		deactivated() {
			this.addFootParam.end_time = parseInt(new Date().getTime() / 1000)
			this.addFootParam.stay_time = this.addFootParam.end_time - this.addFootParam.start_time
			if(uni.getStorageSync('userInfo')){
				this.addFoot('查看全屋套餐')
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #F5F5F5;
	}
	.house{
		padding-bottom: 140rpx;
		.house-navbar{
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			background-color: #FFF;
			display: flex;
			align-items: center;
			justify-content: center;
			z-index: 10;
			/deep/ .u-slot-content{
				justify-content: center;
				.u-tabs{
					width: 50%;
					/* #ifdef MP */
					width: 100%;
					/* #endif */
				}
			}
		}
		.house-swiper{
			/deep/ .uni-swiper-dots{
				.uni-swiper-dot{
					width: 6rpx;
					height: 6rpx;
					vertical-align: middle;
					transition: all .5s;
				}
				.uni-swiper-dot-active{
					width: 8rpx;
					height: 8rpx;
				}
			}
			image{
				width: 100%;
			}
			image.icon{
				position: absolute;
				z-index: 1;
				width: 120rpx;
				height: 120rpx;
				left: 50%;
				top: 50%;
				transform: translate(-50%,-50%);
			}
		}
		.house-pro-info{
			background-color: #FFF;
			padding: 50rpx 30rpx 0;
			border-bottom: solid 20rpx #F6F6F6;
			.house-pro-info-price{
				font-size: 28rpx;
				color: #F59359;
				text{
					font-size: 42rpx;
				}
			}
			.house-pro-info-tit{
				display: flex;
				align-items: center;
				.house-pro-info-tit-left{
					flex: 1;
					min-width: 0;
					margin-right: 30rpx;
					.title{
						margin-top: 40rpx;
						font-size: 36rpx;
						line-height: 64rpx;
						color: #141414;
					}
					.brief{
						margin-top: 20rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;
						.btn{
							display: flex;
						}
						text{
							margin-right: 20rpx;
							font-size: 24rpx;
							color: #757575;
						}
					}
				}
				.house-pro-info-tit-right{
					width: 80rpx;
					height: 80rpx;
					background:rgba(255,255,255,1);
					box-shadow: 0px 8rpx 40rpx 0px rgba(40,34,31,0.05);
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;
					image{
						width: 46rpx;
						height: 46rpx;
					}
				}
			}
			.product-download-copy{
				height: 80rpx;
				line-height: 80rpx;
				background: #F6F6F6;
				border-radius: 8rpx;
				text-align: center;
				margin-top: 40rpx;
				font-size: 24rpx;
				color: #141414;
				display: flex;
				align-items: center;
				justify-content: center;
				image{
					width: 30rpx;
					height: 30rpx;
				}
				.name{
					margin: 0 10rpx 0 20rpx;
				}
				/deep/ .u-icon{
					margin-top: 4rpx;
				}
			}
			.house-pro-info-four{
				margin-top: 50rpx;
				padding: 50rpx 0;
				border-top: solid 2rpx #F4F4F4;
				display: flex;
				align-items: center;
				.house-pro-info-four-item{
					flex: 1;
					display: flex;
					align-items: center;
					.icon{
						width: 24rpx;
						height: 24rpx;
						/* #ifdef APP-PLUS || MP */
						line-height: 10rpx;
						/* #endif */
						text-align: center;
						border: 2rpx solid rgba(51,51,51,1);
						border-radius: 4rpx;
						margin-right: 10rpx;
						/deep/ .u-icon{
							/* #ifdef H5 */
							display: inline-block;
							vertical-align: top;
							margin-top: -13rpx;
							/* #endif */
						}
					}
					.name{
						flex: 1;
						min-width: 0;
						font-size: 24rpx;
					}
				}
			}
		}
		.house-space-item{
			padding: 50rpx 30rpx 0;
			background-color: #FFF;
			.house-space-item-name{
				font-weight: bold;
				color: #141414;
				display: flex;
				align-items: center;
				justify-content: space-between;
				/deep/ .u-checkbox__label{
					margin-right: 0;
				}
				.name{
					font-size: 36rpx;
					margin-right: 30rpx;
				}
				.price{
					font-size: 32rpx;
				}
			}
			.house-space-item-image{
				padding: 50rpx 0;
				image{
					width: 100%;
					border-radius: 8rpx;
					// max-height: 555rpx;
					border: solid 1px #F4F4F4;
				}
			}
			.house-space-item-goods{
				.house-space-item-goods-scroll{
					white-space: nowrap;
					margin: 0 -30rpx;
					width: auto;
					.house-space-item-goods-list{
						padding: 20rpx 0 50rpx;
					}
					.house-space-item-goods-item{
						display: inline-block;
						width: 196rpx;
						margin-right: 20rpx;
						border-radius: 4rpx;
						overflow: hidden;
						box-shadow: -2rpx 7rpx 40rpx 0px rgba(40,34,31,0.06);
						&:first-child{
							margin-left: 30rpx;
						}
						&:last-child{
							margin-right: 30rpx;
						}
						image{
							width: 196rpx;
							height: 196rpx;
							border-radius: 4rpx 4rpx 0 0;
						}
						.goods-name{
							font-size: 24rpx;
							text-align: center;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
							padding: 20rpx 20rpx 10rpx;
						}
						.price{
							padding: 0 20rpx 20rpx;
						}
					}
				}
			}
		}
		.package-detail{
			.package-detail-tit{
				text-align: center;
				font-size: 28rpx;
				background-color: #FFF;
				padding: 30rpx 0;
				color: #141414;
				font-weight: bold;
				&::before{
					margin-right: 30rpx;
				}
				&::after{
					margin-left: 30rpx;
				}
				&::before,&::after{
					content: '';
					display: inline-block;
					vertical-align: middle;
					height: 2rpx;
					width: 200rpx;
					background-color: #F4F4F4;
				}
			}
			image{
				width: 100%;
			}
		}
		.house-bottom{
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			height: 120rpx;
			background-color: #FFF;
			border-top: solid 2rpx #F4F4F4;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 30rpx;
			.house-bottom-left{
				.choseNum{
					margin-bottom: 10rpx;
					color: #757575;
					font-size: 24rpx;
				}
				.price{
					font-size: 24rpx;
					color: #141414;
					text{
						color: #F59359;
						font-weight: bold;
						text{
							font-size: 32rpx;
						}
					}
				}
			}
			.house-bottom-right{
				display: flex;
				align-items: center;
				view{
					width: 190rpx;
					height: 80rpx;
					text-align: center;
					color: #FFF;
					line-height: 80rpx;
					font-size: 28rpx;
					&.add-car{
						border-radius: 8rpx 0 0 8rpx;
						background-color: #141414;
						&.isAdd{
							opacity: .5;
						}
					}
					&.buy{
						border-radius:  0 8rpx 8rpx 0;
						background-color: #F59359;
					}
				}
			}
		}
		/* #ifdef APP-PLUS */
		.posterPopup .uni-transition{
			height: 100%;
		}
		/* #endif */
		.poster{
			width: 600rpx;
			background-color: #FFF;
			overflow: hidden;
			border-radius: 0 0 10rpx 10rpx;
			image{
				position: absolute;
				top: 0;
				left: 0;
			}
			/* #ifdef APP-PLUS */
			width: 100%;
			height: 100%;
			text-align: center;
			background-color: transparent;
			.appPoster{
				position: fixed;
				top: 0;
				bottom: 150rpx;
				left: 0;
				right: 0;
				.close{
					position: absolute;
					top: 30rpx;
					right: 30rpx;
				}
			}
			.poster-canvas{
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%,-50%);
				border-radius: 50%;
			}
			/* #endif */
			
			.save{
				margin: 40rpx;
				height: 88rpx;
				line-height: 88rpx;
				background: rgba(20,20,20,1);
				border-radius: 8rpx;
				text-align: center;
				color: #FFF;
				font-size: 32rpx;
				font-weight: bold;
			}
			
			.poster-share-btns{
				position: fixed;
				bottom: 0;
				left: 0;
				right: 0;
				display: flex;
				align-items: center;
				padding: 30rpx 0;
				background-color: #FFF;
				border-radius: 10rpx 10rpx 0 0;
				height: 150rpx;
				.poster-share-btn{
					flex: 1;
					.text{
						font-size: 24rpx;
						margin-top: 10rpx;
					}
					.poster-share-btn-image{
						width: 80rpx;
						height: 80rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						margin: 0 auto;
						image{
							width: 80rpx;
							height: 80rpx;
						}
					}
				}
			}
			
		}
	}
	.go-home{
		position: fixed !important;
		left: 0;
		top: 10rpx;
		bottom: 130rpx;
		left: 5px;
		right: 10rpx;
		pointer-events: none;
		z-index: 20;
		width: auto;
		height: auto;
		.go-home-img,.go-square{
			position: absolute !important;
			width: 80rpx;
			height: 80rpx;
			pointer-events: auto;
			border-radius: 50%;
			top: initial;
			left: initial;
			right: 25rpx;
			bottom: 0;
			bottom: constant(safe-area-inset-bottom);
			bottom: env(safe-area-inset-bottom);
			text-align: center;
			image{
				width: 80rpx;
				height: 80rpx;
			}
		}
		.go-square{
			margin-bottom: 90rpx;
			width: 130rpx;
			height: 141rpx;
			right: 0;
			image{
				width: 130rpx;
				height: 141rpx;
			}
		}
	}
</style>